<!-- 表格拖动示例: 可拖动列 -->
<template>
  <div>
    <p>{{ dragText }}</p>
    <p>{{ headerArr }}</p>
    <div>
      <table class="table">
        <thead>
        <draggable tag="tr" :list="headerArr" animation="500" @start="onStart" @end="onEnd">
          <td v-for="item in headerArr" :key="item.key">{{ item.title }}</td>
        </draggable>
        </thead>
        <tbody>
        <tr v-for="item in arr" :key="item.id">
          <td v-for="keyInfo in headerArr">{{ item[keyInfo.key] }}</td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, ref} from "vue";
import {VueDraggableNext as draggable} from 'vue-draggable-next'

export default defineComponent({
  setup() {
    const dragText = ref('停止拖动')
    const arr = reactive([
      {id: 1, name: '张三', sex: '男'},
      {id: 2, name: '李四', sex: '男'},
      {id: 3, name: '王五', sex: '女'},
      {id: 4, name: '赵六', sex: '女'},
      {id: 5, name: '孙七', sex: '女'}
    ])
    const headerArr = reactive([
      {key: 'id', title: '#'},
      {key: 'name', title: '姓名'},
      {key: 'sex', title: '性别'}
    ])
    const onStart = () => {
      dragText.value = '拖动中...'
    }
    const onEnd = () => {
      dragText.value = '停止拖动'
    }
    return {arr, dragText, onStart, onEnd, headerArr}
  },
  components: {draggable}
})
</script>

<style scoped>
.table {
  width: 100%;
  display: table;
}

.table thead {
  cursor: move;
}
</style>